<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>length</title>
    <script type="text/javascript">

        //页面加载的时候执行的内容
        window.onload = function (){
            //获取到了id为username的元素节点对象
            var username = document.getElementById("username");
            //获取到了id为message的元素节点对象，用于做信息的提示
            var message = document.getElementById("message");
            //获取到了id为number的元素节点对象，用于做信息的正则表达式验证
            var number = document.getElementById("number");

            username.oninput = function (){
                // var pattern = new RegExp("\d+");
                var pattern = /\d+/;

                var uv = username.value

                if(pattern.test(uv)){
                    number.innerHTML = "全是数字".fontcolor("green");
                }else{
                    number.innerHTML = "除了数字有其他内容".fontcolor("green");
                }
            }

            //使用dom形式绑定事件，可以不在某个标签内指定执行某个函数
            username.onblur = function (){

                //通过节点对象获取value属性值
                if (username.value.length > 6) {
                    username.focus();
                    username.select();
                    message.innerHTML = "too long".fontcolor("red");
                }else{
                    //只写文本
                    // message.innerText = "格式正确";
                    //可以写入html标签
                    // message.innerHTML = "<font color='green'>格式正确</font>";
                    message.innerHTML = "格式正确".fontcolor("green");
                }
            }
        }


    </script>
</head>
<body>

  姓名：<input type="text" name="username" id="username"/><br/>
  <span id="number"></span>
  <span id="message"></span>

</body>
</html>